<style>
.layui-form-pane .layui-form-label{width:auto;}
.layui-form-item{margin-bottom: 0px;}
.order-time-bg{background-color:#1E9FFF;color:white;padding:0px 5px;}
</style>
<div class="fixed-bar">
<form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="hisi-table-search">
<div class="layui-form-item">	
	<div class="layui-inline">
		<label class="layui-form-label">分配工厂</label>
		<div class="layui-input-inline">
			{:Form::select('factory_id', '', $factoryKV, '', '')}
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">订单号</label>
		<div class="layui-input-inline">
			<input type="text" name="client_ordernum" lay-verify="" placeholder="输入订单号" class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">布种</label>
		<div class="layui-input-inline">
			<input type="text" name="name" lay-verify="" placeholder="输入布种" class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
        <label class="layui-form-label">出货日期</label>
        <div class="layui-input-inline">
          <input type="text" name="create_date_range" readonly="" id="create_date_range" lay-verify="" placeholder="选择下单日期" class="layui-input">
        </div>
    </div>
	<div class="layui-inline">
		<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
		<button type="button" class="layui-btn layui-btn-primary hisi-export">导出</button>
	</div>
</div>
</form>
</div>

<table id="dataTable"></table>

{include file="system@block/layui" /}
<script type="text/html" title="模板" id="toolbar">
	今日产能 <span class="todayJian red">0</span> 件，&nbsp;&nbsp;&nbsp;&nbsp;
	待领料 <span class="toPickNum red">0</span> 条，&nbsp;&nbsp;&nbsp;&nbsp;
	已领料 <span class="pickedNum red">0</span> 条/ <span class="pickedJian red">0</span> 件
	<a href="{:url('history')}" class="layui-btn layui-btn-xs layui-btn-primary" title="领料历史">查看领料历史</a>
</script>
<script type="text/html" title="操作按钮模板" id="pickingStatusTpl">
	{{# if(d.user_id>0){ }}
    	已领料
	{{# }else{ }}
		<a href="javascript:void(0)" class="layui-btn layui-btn-xs layui-btn-normal picking" data-id="{{ d.id }}" title="待领料">待领料</a>
	{{# } }}
</script>

<div id="pickingTpl" style="display:none;" class="pt20 pl20">
	<form class="layui-form layui-form-pane" lay-verify="" action="" method="get">
	<div class="layui-form-item">	
		<div class="layui-inline">
			<label class="layui-form-label">领料工厂</label>
			<div class="layui-input-inline">
				{:Form::select('picking_factory_id', '', $factoryKV, '', '')}
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">领料人</label>
			<div class="layui-input-inline">
				{:Form::select('user_id', '', $pickingUserKV, '', '')}
			</div>
		</div>
	</div>
	</form>
</div>

<script type="text/javascript">
    layui.use(['table', 'tool','laydate', 'jquery', 'layer'], function() {
        var $ = layui.jquery;
    	var table = layui.table;
    	var layer = layui.layer;
        var laydate = layui.laydate;
        table.render({
            elem: '#dataTable'
            ,url: '{:url()}' //数据接口
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,limit: 20
            ,limits: [20,50,100,150,200]
            ,text: {
                none : '暂无相关数据'
            }
            ,cellMinWidth: 80
            ,toolbar: '#toolbar'
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,cols: [[ //表头
            	{field: 'seq', title:'序号',width:80}
            	,{field: 'shipment_time_text', title:'出货日期',width:120}
            	,{field: 'type_text', title:'工序'}
            	,{field: 'client_ordernum', title:'订单号',templet:function(d){return '<span class="copy-item">'+d.client_ordernum+'</span>'},width:100}
            	,{field: 'tiaoshu', title:'总匹数'}
            	,{field: 'cloth_num', title:'布号'}
            	,{field: 'name', title:'布种',width:100}
            	,{field: 'color', title:'颜色'}
            	,{field: 'create_time_text', title:'到料日期',width:120}
            	,{field: 'caigou_status', title:'批色', templet:function(d){return layui.tool.formatBool(d.caichuang_type);}}
            	,{field: 'length', title:'米长'}
            	,{field: 'material_dosage', title:'单件用量'}
            	,{field: 'jishu', title:'件数'}
            	,{field: 'over_time_text', title:'完成时间',width:120}
            	,{field: 'factory_name', title:'分配工厂',width:100}
            	,{field: 'user_id', title:'领料状态', templet:"#pickingStatusTpl"}
            	,{field: 'picking_time_text', title:'领料日期',width:120}
            	,{field: 'user_name', title:'领料人'}
            	,{field: 'caichuang_type', title:'裁床类别', templet:function(d){return layui.tool.formatCaichuangType(d.caichuang_type);},width:100}
            	,{field: 'picking_factory_name', title:'领料工厂',width:100}
            ]]
            ,done: function(res){
            	var stat = res.stat;
            	$('.todayJian').html(stat.todayJian);
            	$('.toPickNum').html(stat.toPickNum);
            	$('.pickedNum').html(stat.pickedNum);
            	$('.pickedJian').html(stat.pickedJian);
            }
        });
        
    	// 领料
		$(document).on('click','.picking',function(){
			var id = $(this).attr('data-id');
			var layerPicking = layer.open({
				type: 1
				,shade: 0
				,area: ['350px', '300px']
				,anim: parseInt(Math.random()*(6+1),10)
				,offset: '100px'
				,skin:'layui-layer-molv'
				,title:'领料'
				,content: $('#pickingTpl')
				,btn: ['确认']
				,yes: function(index, layero){
			    	data = $('#pickingTpl form').serialize();
			    	$.ajax({
			 		   type: "POST",
			 		   url: "{:url('picking')}",
			 		   data: data+"&id="+id,
			 		   dataType:"json",
			 		   success: function(res){
			 			  if (res.code == 1) {
							 layer.msg(res.msg, {icon: 1});
							 $('#pickingTpl form')[0].reset();
							 layer.close(layerPicking);
							 table.reload('dataTable');
						  } else {
							 layer.msg(res.msg, {icon: 2,anim: 6});
						  }
			 		   }
			 		});
			    	
				}
			});
		});
		laydate.render({
            elem: '#create_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
              	$('#create_date_range').val(value);
            	$('#layui-laydate1').remove();//关闭面板
            }
        });
    });
</script>